<template>
	<view>
		<view class="img-a">
			<view style="font-size: 30rpx; color: #fff;padding-top: 60rpx;">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="6">车牌号：{{carInfo.plateNo}}</u-col>
					<u-col span="6">车牌颜色：{{carInfo.plateColor_dictText}}</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="6">注册日期：{{carInfo.registerDate}}</u-col>
					<u-col span="6">发动机号：{{carInfo.engineNum}}</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">燃料类型：{{carInfo.fuelType_dictText}}</u-col>
					<u-col span="8">VIN识别码：{{carInfo.vin}}</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">排放类型：{{carInfo.evnType_dictText}}</u-col>
					<u-col span="4">使用性质：{{carInfo.function_dictText}}</u-col>
					<u-col span="4">联网状态：{{carInfo.networkingStatus_dictText}}</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="12">车辆品牌型号：{{carInfo.carBrandModel}}</u-col>
				</u-row>
			</view>
		</view>
		<!-- 车辆基本信息 -->
		<view class=" login-view cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
			<view class="action">
				<text class='cuIcon-title text-blue'></text>车辆基本信息
			</view>
		</view>
		<view class="cu-list grid col-3 text-sm">
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
				v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
				<view class="padding text-center">
					<image :src="item.icon" style="width:100rpx;height:100rpx;" />
					<view class="margin-top-xs">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 排放查询 -->
		<view class=" login-view cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
			<view class="action">
				<text class='cuIcon-title text-blue'></text>排放查询
			</view>
		</view>
		<view class="cu-list grid col-3 text-sm">
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
				v-for="(item,index) in envList" :key="index" @tap="goPage(item.page)">
				<view class="padding text-center">
					<image v-if="item.icon" :src="item.icon" style="width:100rpx;height:100rpx;" />
					<view class="margin-top-xs">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAction,
		postAction,
		putAction
	} from '@/api/api.js';
	import config from '@/api/config.js'
	export default {
		data() {
			return {
				carInfo: {
					plateColor: "",
					evnType: "X", //排放类型
					evnType_dictText: "排放标准未知", //排放类型
					vin: "",
					plateNo: "", //车牌号
					engineNum: "", //发动机号
					registerDate: "", //注册日期
					fleet: "", //所属车队
					license: "", //行驶证
					inventory: "", //环保清单
					carBrandModel: "", //车辆品牌型号
					fuelType: '', //燃料类型
					networkingStatus: '', //联网状态
					freightVolume: '', //运输量
					function: '', //使用性质
					producedTime: '', //生产日期
					vehicleOwner: '', //车辆所有人(单位)
					engineType: '', //发动机型号
					engineManufacturer: '', //发动机生产厂
				},
				usList: [{
						title: '请上传行驶证',
						icon: '../../static/icon/yuyue.png',
						page: '/upload/license'
					},
					{
						title: '请上传环保清单',
						icon: '../../static/icon/yuyue.png',
						page: '/upload/inventory'
					},
					{
						title: '修改车辆信息',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/carInfo/editCar'
					}
				],
				envList: [{
						title: '根据车辆型号查询(2017年以前生产的车辆)',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/index/regisiter'
					},
					{
						title: '根据VIN码查询(2017年以后生产的车辆)',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/carInfo/vinQuery'
					},
					{
						title: '重型柴油车查询  (推荐重型车使用)',
						icon: '../../static/icon/yuyue.png',
						page: '/pages/carInfo/carList'
					}
				],
				urls: {
					queryByPlate: '/carInformation/carInformation/m/queryByPlate',
				},
			}
		},
		onLoad(e) {
			if (e.plateNo) {
				this.queryByPlate(e.plateNo)
			}
		},
		onShow() {
			this.carInfo = uni.getStorageSync("carInfo")
			console.log("当前内存中的carInfo", this.carInfo)
			this.updateUsList()
		},
		methods: {
			queryByPlate(plateNo) {
				getAction(this.urls.queryByPlate + "?plate=" + plateNo).then((res) => {
					if (res.success) {
						this.carInfo = res.result.records[0]
						this.updateUsList()
					} else {

					}
				})
			},
			goPage(page) {
				if (page === '/upload/license') return this.uploadImage(99)
				if (!this.carInfo.license) return uni.$u.toast("请上传行驶证")
				if (page === '/upload/inventory') return this.uploadImage(2)
				if (!this.carInfo.inventory) return uni.$u.toast("请上传环保清单")
				if (page.endsWith("editCar") || page.endsWith("vinQuery")) {
					uni.setStorageSync("carInfo", this.carInfo)
				}
				uni.navigateTo({
					url: page
				})
			},
			updateUsList() {
				if (this.carInfo.license) {
					this.$set(this.usList[0], "title", "行驶证已上传")
					this.$set(this.usList[0], "icon", this.carInfo.license)
				}
				if (this.carInfo.inventory) {
					this.$set(this.usList[1], "title", "环保清单已上传")
					this.$set(this.usList[1], "icon", this.carInfo.inventory)
				}
			},
			uploadImage(name) {
				if (this.imageSrc) {
					// 如果已有图片，显示确认对话框
					uni.showModal({
						title: '提示',
						content: '确定要替换当前图片吗？',
						success: (modalRes) => {
							if (modalRes.confirm) {
								// 用户点击了确认按钮，执行图片选择
								this.chooseAndSetImage(name);
							}
						}
					});
				} else {
					// 没有图片时直接执行图片选择
					this.chooseAndSetImage(name);
				}
			},
			chooseAndSetImage(name) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 调用上传方法
						this.uploadFile(tempFilePath, name);
					}
				});
			},
			uploadFile(filePath, name) {
				this.uploadFilePromise(filePath, name)
					.then(res => {
						console.log('图片上传成功:', res);
						if (name == 99) {
							this.carInfo.license = res.message
							this.carInfo.carBrandModel = res.result.carBrandModel
							this.carInfo.carType = res.result.carType
							this.carInfo.engineNum = res.result.engineNum
							this.carInfo.function = res.result.function
							this.carInfo.function_dictText = res.result.function
							this.carInfo.plateNo = res.result.plate
							this.carInfo.registerDate = res.result.registerDate
							this.carInfo.vin = res.result.vin
						}
						if (name == 2) this.carInfo.inventory = res.message
						this.updateUsList()
					})
					.catch(error => {
						console.error('图片上传失败:', error);
						uni.$u.toast(error)
					});
			},
			uploadFilePromise(url, name) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + config.imgUpload,
						filePath: url,
						name: 'file',
						formData: {
							name: name,
						},
						success: (res) => {
							let result = JSON.parse(res.data)
							if (result.success) {
								setTimeout(() => {
									resolve(result)
								}, 100)
							} else {
								reject(result)
							}
						}
					});
				})
			},
		}
	}
</script>

<style>
	.t-t {
		text-align: left;
		/* font-size: 42rpx; */
		color: #fff9d7;
		/* padding: 130rpx 0 0 70rpx; */
		font-weight: bold;
		line-height: 70rpx;
	}

	.img-a {
		width: 100%;
		height: 450rpx;
		background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
		background-size: 100%;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -20rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}
</style>